<template>
    <Topbar></Topbar>
    <!-- 同意好友申请 -->
    <div class="chatFrame">
        <van-list>
            <van-cell v-for="item in list">
                <template #title>
                    <div class="cell">
                        <van-image
                            height="50"
                            radius="5"
                            :src="'/api/'+item.User.avatar"
                            width="50"/>
                        <div class="message">
                            <p class="custom-title">{{ item.User.name }}</p>
                            <span class="custom-title">{{ item.add_information }}</span>
                        </div>
                        <div class="right">
                            <div class="time">
                                {{ dayjs(item.create_time).format("YYYY-MM-DD HH:mm:ss") }}
                            </div>
                            <van-button
                                type="primary"
                                size="mini"
                                class="btn-AW"
                                @click="agreeFriend(item.id)"
                                v-if="item.status == 1"
                            >
                                同意
                            </van-button>
                            <p v-else>
                                已同意
                            </p>
                        </div>

                    </div>
                </template>
            </van-cell>
        </van-list>
    </div>

    <van-dialog
        v-model:show="show"
        title="你确认同意吗"
        show-cancel-button
        @confirm="confirm(agreeId)"
    >
        <!-- 备注名 -->
        <van-cell-group inset>
            <van-field
                v-model="value"
                label="好友备注："
                placeholder="请输入备注信息"/>
        </van-cell-group>
    </van-dialog>
</template>


<script
    setup
    lang="ts">
import {
    ref
} from 'vue';
import Topbar
    from "../../components/Topbar.vue";
import {
    useFriendStore
} from "../../store/friend";
import {
    FriendResponseData
} from "../../type/friend";
import dayjs from "dayjs";


const show = ref(false)

const value = ref("")
const list = ref<FriendResponseData[]>([])

//实例化好友请求列表
const friendStore = useFriendStore()
friendStore.getFriendRequestList()

// 订阅仓库
friendStore.$subscribe((mutation, state) => {
    // FriendResponseData FriendResponseData
    list.value = state.friendRequestList as FriendResponseData[]
})

//好友请求同意的id
const agreeId = ref<number>(0)

//同意好友
const agreeFriend = (id: number) => {
    show.value = true
    agreeId.value = id
}

//发起请求同意好友
const confirm = async (agreeId: number) => {
    await friendStore.getConsent(agreeId, value.value)

    friendStore.getFriendRequestList()
}

</script>


<style scoped lang="less">
.van-nav-bar {
    background-color: #eeeeee;
}

.van-cell {
    display: flex;
}

.chatFrame {
    .cell {
        display: flex;
        justify-content: space-between;

        .message {
            width: 100%;
            flex: 1;
            margin-left: 0.7rem;
        }

        .right {
            display: flex;
            flex-direction: column;

            p{
                text-align: center;
            }
        }
    }
}

.btn-AW {

}
</style>